import React,{Component} from 'react';
import Adaptive from '../../../component/adaptive/Adaptive';
import { Map,Marker,InfoWindow} from 'react-amap';
import Lang from './Lang';
import './connection.less';
const html = "<div style='width: 235px;'><p style='text-indent: 0'>锦胜华安写字楼</p><p style='text-indent: 0'>地址：北京市西城区德胜门内西顺城街46号锦胜华安写字楼</p><p style='text-indent: 0'>电话：010-64058820</p></div>"
class Connection extends Component{
    constructor(){
        super();
        this.state={
            visible:false
        };
        this.mapPlugins = ['ToolBar','Scale'];
        this.mapCenter = {longitude: 116.3773900000, latitude:39.9481530000};
        this.markerEvents = {
            created: (instance) => {
                console.log('Marker 实例创建成功；如果你需要对原生实例进行操作，可以从这里开始；');
                console.log(instance);
            },
            click: (e) => {
               this.setState({
                   visible:true
               })
            },
            // dblclick: (e) => {
            //     console.log("你刚刚双击了这个图标；调用参数为：");
            //     console.log(e);
            // },
            // ... 支持绑定所有原生的高德 Marker 事件
        };
        this.infoWindowClick = {
            close:() => {
                this.setState({
                    visible:false
                })
            }
        }
    };
    render() {
        let prefix = 'connection';
        let address = Lang.connect;
        let addressEle = address.map((value,index)=>{
            return(
                <p key={index} id={prefix+'-list'}>
                    {value}
                </p>
            )
        });
        return (
            <div className={prefix}>
                <Adaptive desktop={
                    <div className={prefix+'-map'}>
                        <Map
                            center={this.mapCenter}
                            plugins={this.mapPlugins}
                            zoom={18}
                        >
                            <Marker position={this.mapCenter} events={this.markerEvents} animation="AMAP_ANIMATION_DROP"/>
                            <InfoWindow
                                position={this.mapCenter}
                                content={html}
                                visible={this.state.visible}
                                events={this.infoWindowClick}
                            />
                        </Map>
                </div>
                } phone={false} size={1200}/>
                <div className={prefix+'-address'}>
                    <h3 className={prefix+"-title"}>联系我们：</h3>
                    {addressEle}
                </div>
                <Adaptive desktop={false} phone={
                    <img src={require('./img/map.jpg')} alt="" style={{maxWidth:'100%',marginTop:"10px"}}/>
                } size={1200}/>
            </div>
        )
    }
};
export default Connection;